<template>
  <view class="content">
    <view class="jtop">
      <view class="status_bar"><!-- 这里是状态栏 --></view>
      <view class="jtop_l"></view>
      <view class="jtop_c">消息</view>
      <view class="jtop_r" @tap="to_more"
        ><image src="../../static/img/index/sys.png"></image
      ></view>
    </view>

    <uni-search-bar
      placeholder="搜索"
      @confirm="search"
      class="ss"
    ></uni-search-bar>

    <view class="ml" v-if="nodata">
      <!-- 0:企业通知 1:应用消息 2：系统消息 -->
      <view
        class="mlb"
        @tap="to_listtwo(index, item.groupId)"
        v-for="(item, index) in items"
        :key="index"
      >
        <view class="mlb_l">
          <view class="mlb_li mlb_li2">
            <image
              :src="
                item.vatar
                  ? item.vatar
                  : '../../static/img/ic_System message.png'
              "
            ></image>

            <!-- <image
              src="../../static/img/ic_company.png"
              v-if="item.type == 0"
            ></image>
            <image
              src="../../static/img/ic_Project message.png"
              v-if="item.type == 1"
            ></image>
            <image
              src="../../static/img/ic_System message.png"
              v-if="item.type == 2"
            ></image> -->
          </view>
          <view class="mlb_lt" v-if="item.unreadCnt">
            {{ item.unreadCnt }}
          </view>
        </view>
        <view class="mlb_r">
          <view class="mlb_rt">
            <!-- <view class="mlb_rtl" v-if="item.type == 0 || item.type == 2">
              {{ item.name }}
            </view> -->
            <view class="mlb_rtl">
              {{ item.name }}
            </view>
            <view class="mlb_rtr">
              {{ item.lastMsgTime }}
            </view>
          </view>
          <view class="mlb_rf">
            {{ item.content }}
          </view>
        </view>
      </view>
    </view>

    <view class="noc" v-if="!nodata">
      <image src="../../static/img/ic_message_normal@2x.png"></image>
      <span>暂无消息</span>
    </view>

    <!-- 弹出层 -->
    <view :class="[aashowpop ? 'tc' : 'tc hide']">
      <view class="jtop_bj" @click="abtTC"></view>

      <view class="tc_box">
        <view class="tc_boxt">
          未登录
        </view>
        <view class="tc_boxtc">
          您未登录，需要登录后才能继续
        </view>
        <view class="tc_f">
          <!-- <view class="tc_fl" @click="jshow_pop">取消</view> -->
          <view class="tc_fr" @click="abtTC2">确定</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import request from '@/common/request.js';
import { mapState } from 'vuex';

export default {
  data() {
    return {
      repeat_click: true,
      ashowpop: false,
      ashowpop_jrename: false,
      ashowpop_jdel: false,
      ashowpopT: false,
      bj: false,
      yd: false,

      biao: '全部',
      aitems: [
        { name: '全部', actived: true },
        { name: '本月', actived: false },
        { name: '3个月', actived: false },
        { name: '1年', actived: false },
        { name: '2年', actived: false },
      ],
      nodata: false,
      items: [],
      name: '',
      jtitle: '',
      nian: '',
      yue: '',
      re: '',
      week: '',
      today: '',

      aashowpop: false,
    };
  },

  /** 点击顶部按钮的方法 */
  onNavigationBarButtonTap() {
    console.log('你点击了按钮');
    // 允许从相机和相册扫码
    uni.scanCode({
      success: function(res) {
        console.log('条码类型：' + res.scanType);
        console.log('条码内容：' + res.result);
      },
    });
  },

  onShow() {
    var res = global.isLogin();

    if (!res) {
      this.aashowpop = true;
      //   uni.showModal({
      // title:'未登录',
      // content:"您未登录，需要登录后才能继续",
      // showCancel: false,
      // success:function(){
      //   uni.navigateTo({
      // 	url: '../login/login'
      //   });
      // }
      //   })
    } else {
      this.aashowpop = false;
      var date = new Date();
      var Y = date.getFullYear();
      var M =
        date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
      var h = date.getDate();

      var now = new Date();
      var day = now.getDay();
      var weeks = new Array(
        '星期日',
        '星期一',
        '星期二',
        '星期三',
        '星期四',
        '星期五',
        '星期六',
      );
      var week = weeks[day];

      this.nian = Y;
      this.week = week;
      this.re = D;
      this.yue = M;

      this.today = Y + '-' + M + '-' + D;
      // this.data_add('2020-01-01' + ' 00:00', this.today + ' 24:00');
      // 初始化内容
      this.data_add();
    }
  },

  methods: {
    abtTC() {
      // this.aashowpop = false
    },
    abtTC2() {
      uni.navigateTo({
        url: '../login/login',
      });
    },
    to_more() {
      console.log('你点击了按钮');
      // 允许从相机和相册扫码
      uni.scanCode({
        success: function(res) {
          console.log('条码类型：' + res.scanType);
          console.log('条码内容：' + res.result);
        },
      });
    },

    search(a) {
      this.data_add('1', a.value);
    },
    data_add(a, b) {
      this.projectId = uni.getStorageSync('dqxm').id;

      var jd = {
        size: 100,
        page: 1,
      };

      if (a == 1) {
        jd.content = b;
      }
      request({
        url: `/msg/group/list`,
        method: 'GET',
        data: jd,

        success: res => {
          console.log('2项目列表信息', res);
          console.log(res.data.data);

          if (res.data.success == true) {
            if (res.data.data.length > 0) {
              this.items = res.data.data;
              console.log(this.items);
              this.nodata = true;
            } else {
              this.items = '';
              this.nodata = false;
            }
          } else {
            this.repeat_click = true;
            uni.showToast({
              title: res.data.msg,
              icon: 'none',
            });
          }
        },
      });
    },

    // 跳转
    to_listtwo(a) {
      uni.setStorageSync('temp_data1', this.items[a]);
      console.log('aaaaa', this.items[a].type);
      if (this.items[a].type == 2) {
        uni.navigateTo({
          url: '../msg/msg_list',
        });
      } else {
        uni.navigateTo({
          url: '../msg/msg_listtwo',
        });
      }
    },
    to_list() {
      uni.navigateTo({
        url: '../msg/msg_list',
      });
    },

    navigateBack() {
      uni.navigateBack();
    },
  },
  // computed: mapState(['forcedLogin', 'hasLogin', 'userName'])
};
</script>

<style>
.ml {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  background: #ffffff;
}
.mlb {
  width: 100%;
  height: 140rpx;
  display: block;
  float: left;
}
.mlb_l {
  width: 96rpx;
  height: 96rpx;
  display: block;
  float: left;
  position: relative;
  margin: 20rpx 0 0 30rpx;
}
.mlb_li {
  width: 96rpx;
  height: 96rpx;
  display: block;
  float: left;
  background: #5188ff;
  border-radius: 12rpx;
}

.mlb_li image {
  width: 64rpx;
  height: 64rpx;
  display: block;
  float: left;
  margin: 16rpx;
}

.mlb_li2 image {
  width: 96rpx;
  height: 96rpx;
  display: block;
  float: left;
  margin: 0rpx;
}
.mlb_lt {
  position: absolute;
  min-width: 24rpx;
  padding: 0 6rpx;
  width: auto;
  height: 36rpx;
  right: -10rpx;
  top: -10rpx;
  background: #eb5342;
  font-size: 24rpx;
  line-height: 36rpx;
  text-align: center;
  color: #ffffff;
  border-radius: 36rpx;
}
.mlb_r {
  width: 600rpx;
  height: 139rpx;
  border-bottom: 1px solid #dddddd;
  display: block;
  float: right;
}
.mlb_rt {
  width: 100%;
  height: auto;
  display: block;
  float: left;
}
.mlb_rtl {
  width: auto;
  height: auto;
  display: block;
  float: left;
  font-size: 34rpx;
  color: #000000;
  margin: 26rpx 0 0 0;
}
.mlb_rtr {
  width: auto;
  height: auto;
  display: block;
  float: right;
  font-size: 24rpx;
  color: #cccccc;
  margin: 31rpx 30rpx 0 0;
}
.mlb_rf {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  font-size: 28rpx;
  color: #999999;
  margin: 10rpx 0 0 0;
}

.content {
  background: rgb(242, 242, 242);
}
.noc {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  margin: 400rpx 0 0 0;
}
.noc image {
  width: 120rpx;
  height: 120rpx;
  display: block;
  float: left;
  margin: 0 315rpx 20rpx;
}
.noc span {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  font-size: 32rpx;
  line-height: 40rpx;
  text-align: center;
  color: #999999;
}

.jtop {
  width: 100%;
  height: 88rpx;
  background: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 998;
  box-shadow: inset 0px -1px 0px #dddddd;
}
.jtop_l {
  width: auto;
  height: auto;
  display: block;
  float: left;
}
.jtop_r {
  width: 48rpx;
  height: 48rpx;
  display: block;
  float: right;
  margin: 20rpx 20rpx 0 0;
}
.jtop_r image {
  width: 48rpx;
  height: 48rpx;
  display: block;
  float: left;
}
.jtop_c {
  width: 70%;
  height: 48rpx;
  line-height: 48rpx;
  display: block;
  float: left;
  position: fixed;
  top: 20rpx;
  left: 15%;
  text-align: center;
  font-size: 36rpx;
  color: #000000;
}
.jtop_c image {
  width: 36rpx;
  height: 36rpx;
  display: inline-block;
  float: none;
  margin-bottom: -5rpx;
  margin-left: 5rpx;
}
.jtop_b {
  width: 100%;
  height: auto;
  background: #ffffff;
  position: fixed;
  top: 88rpx;
  left: 0;
  z-index: 1001;
}
.jtop_bj {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 997;
}

.jtop_bs {
  width: 100%;
  height: auto;
  background: #ffffff;
  display: block;
  float: left;
}
.jtop_bs view {
  width: 720rpx;
  height: 90rpx;
  background: #ffffff;
  display: block;
  float: left;
  margin: 0 0 0 30rpx;
  border-bottom: 1px solid #dddddd;
}
.jtop_bs view text {
  width: 80%;
  height: 90rpx;
  line-height: 90rpx;
  background: #ffffff;
  display: block;
  float: left;
  font-size: 34rpx;
  color: #000000;
}
.jtop_bs view image {
  width: 48rpx;
  height: 48rpx;
  display: none;
  float: right;
  margin: 21rpx 30rpx 0 0;
}
.jtop_bs.selectBox view image {
  display: block;
}

.ss {
  margin-top: 88rpx;
}

.tc {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  display: block;
}

.tc_box {
  width: 540rpx;
  height: auto;
  background: #ffffff;
  border-radius: 14rpx;
  margin: 460rpx 105rpx 0;
  position: relative;
  z-index: 10001;
  overflow: hidden;
}
.tc_boxt {
  width: 100%;
  height: 44rpx;
  font-size: 36rpx;
  line-height: 44rpx;
  display: block;
  float: left;
  text-align: center;
  margin: 40rpx 0 20rpx;
  color: #000000;
}
.tc_boxtc {
  width: 100%;
  height: 36rpx;
  font-size: 28rpx;
  line-height: 36rpx;
  display: block;
  float: left;
  text-align: center;
  margin: 0rpx 0 30rpx;
  color: #666666;
}
.tc_boxi {
  width: 460rpx;
  height: 88rpx;
  background: #ffffff;
  border-radius: 8rpx;
  border: 1px solid #dddddd;
  display: block;
  float: left;
  margin: 0rpx 40rpx 22rpx 40rpx;
}
.tc_boxi input {
  width: 70%;
  height: 48rpx;
  margin: 20rpx 5%;
  font-size: 32rpx;
  color: #000000;
  float: left;
}
.tc_boxi image {
  width: 36rpx;
  height: 36rpx;
  display: block;
  float: right;
  margin: 26rpx 20rpx 0rpx 0;
}
.tc_f {
  width: 100%;
  height: 100rpx;
  display: block;
  float: left;
  border-top: 1px solid #dcdee3;
  margin: 20rpx 0 0;
}
.tc_fl {
  width: 269rpx;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 36rpx;
  color: #256aff;
  display: block;
  float: left;
  border-right: 1px solid #dcdee3;
}
.tc_fr {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 36rpx;
  color: #256aff;
  display: block;
  float: left;
}
.tc_fr2 {
  width: 269rpx;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 36rpx;
  color: #eb5342;
  display: block;
  float: left;
}
</style>
